<template>
	<section class="vbox" id="bjax-el">
		<section class="scrollable padder-lg">
			<div class="row row-sm">
				<div class="tags m-t-md m-b-md l-h-2x text-lg pull-right">
					<a href="#" class="btn btn-rounded m-r-sm bg-success">视频</a>
					<a href="#" class="btn btn-rounded m-r-sm bg-white">专辑</a>
					<a href="#" class="btn btn-rounded m-r-sm bg-white">用户</a>
					<a href="#" class="btn btn-rounded m-r-sm bg-white">网站</a>
				</div>
			</div>
			<!-- <h3 class="font-thin m-b">视频列表</h3> -->
			<div class="row row-sm">
				<!-- col-xs-12 col-sm-4 3列 -->
				<masonry id="masonry" :cols="{default: 6, 800: 4, 500: 2, 300: 1}" :gutter="{default: '30px', 700: '15px'}">
					<!-- class="col-xs-6 col-sm-4 col-md-3" -->
					<div v-for="item in resultList" v-if="'1' == item.publish">
						<div class="item">
							<div class="pos-rlt">
								<div class="item-overlay opacity r r-2x bg-black">
									<div class="center text-center m-t-n">
										<router-link :to="'/video/'+ item.id"><i class="fa fa-play-circle i-2x"></i></router-link>
									</div>
								</div>
								<div class="top">
									<span class="badge bg-dark m-l-sm m-t-sm">{{ item.durationTime }}</span>
								</div><!-- style="height: 200px;" -->
								<img :src="$api.file.url.view + item.poster" alt="" class="r r-2x img-full center-block">
							</div>
							<div class="padder-v">
								<router-link :to="'/video/'+ item.id" class="text-ellipsis">{{ item.title }}</router-link>
								<span href="#" class="text-ellipsis text-xs text-muted">{{ item.createTime }}</span>
							</div>
						</div>
					</div>
				</masonry>
			</div>
			<pagination :total="total" :pageNo='pageNo' :pageSize='pageSize' @onPageChange="query"></pagination>
		</section>
	</section>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				keywords: '',
				resultList: [],
				total: 0, // 记录总条数
				pageSize: 10, // 每页显示条数
				pageNo: 1 // 当前的页数
			}
		},
		mounted() {
			this.query();
		},
		methods: {
			query(pageNo) {
				this.pageNo = null == pageNo ? 1 : pageNo;
				this.$api.video.query({
					title: this.keywords,
					publish: 1,
					pageSize: this.pageSize,
					pageNo: this.pageNo
				}).then(data => {
					this.resultList = data.rows;
					this.pageNo = data.pageNo;
					if (1 == this.pageNo) {
						this.total = data.total;
					}
				});
			}
		}
	}
</script>
<style>
</style>
